<template>
  <el-card class="login-form-body form-group">
    <el-form ref="formData" :rules="rules" :model="user" label-position="top" label-width="50px">
      <el-form-item label="账户:" class="login-label" prop="account">
        <el-input class="login-input" placeholder="请输入手机号或者邮箱" v-model="user.account" clearable/>
      </el-form-item>
      <el-form-item label="密码:" class="login-label" prop="password">
        <el-input placeholder="请输入密码" class="login-input" v-model="user.password" type='password' clearable/>
      </el-form-item>
      <el-form-item label="验证码:" class="login-label" prop="verificationCode">
        <el-input placeholder="请输入验证码" v-model="user.verificationCode" class="login-input" clearable/>
        <div @click="refreshCode">
          <!--验证码组件-->
          <s-identify :identifyCode="identifyCode"></s-identify>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"  class="btn login-label"  @click="login('formData')">登录</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { login } from '@/services/login/login'
import {
  IDENTIFY_CODE_ARRAY,
  validateIdentifyCode,
  validatorAccount,
  validatorPassword
} from '@/script/login/LoginOrRegister'
import SIdentify from '@/components/identify/SIdentify'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Login',
  components: {
    SIdentify
  },
  data () {
    // 验证常量
    const validatorIdentifyCode = (rule, value, callback) => {
      return callback(validateIdentifyCode(this.identifyCode, value))
    }
    return {
      user: {
        account: '',
        password: '',
        verificationCode: ''
      },
      timer: null,
      // 倒计时秒数
      countdown: 60,
      identifyCode: '',
      identifyCodes: IDENTIFY_CODE_ARRAY,
      rules: {
        account: [
          { required: true, validator: validatorAccount, trigger: 'input' }
        ],
        password: [
          { required: true, validator: validatorPassword, trigger: 'input' }
        ],
        verificationCode: [
          { required: true, validator: validatorIdentifyCode, trigger: 'input' }
        ]
      }
    }
  },
  methods: {
    // 刷新验证码
    refreshCode () {
      this.user.verificationCode = ''
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    makeCode (o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]
      }
    },
    randomNum (min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    getValidStr () {
      if (this.countdown > 0 && this.countdown <= 60) {
        this.countdown--
        if (this.countdown <= 0) {
          clearInterval(this.timer)
          this.countdown = 60
          this.timer = null
        }
      }
    },
    // 登录
    login: async function (formData) {
      let failValidate = false
      this.getValidStr()
      await this.$refs[formData].validate(valid => {
        if (!valid) {
          this.$message.error('您输入的格式有误，请仔细检查')
          this.refreshCode()
          failValidate = true
        }
      })
      if (failValidate) return
      const dataForm = {
        account: this.user.account,
        password: this.user.password
      }
      const userInfo = JSON.stringify(dataForm)
      login(userInfo).then((res) => {
        const code = res.code
        if (code === 30005) {
          this.$message.error('账号已被冻结')
          return
        }
        if (code !== 10000) {
          this.$message.error('账号或密码错误')
          return
        }
        // 将登陆信息存入sessionStorage和vuex
        const data = res.data
        const user = {
          nickName: data.nickName,
          image: data.image,
          number: data.number
        }
        this.$store.dispatch('saveUserInfo', user).then(() => {
          setTimeout(() => {
            this.$router.push({ path: '/' })
          }, 300)
        })
      })
    }
  },
  mounted () {
    // 初始化验证码
    this.identifyCode = ''
    this.makeCode(this.identifyCodes, 4)
  }
}
</script>
